<template>
    <div>
            <div class="fanhui" >
                <div class="iconfont icon--zuo" @click="goback"></div>
            </div>
            <div class="title"><h2>硅谷外卖</h2></div>
            <div class="login_title">
                <a href="javascript:" :class="{on:phoneLogin}" @click="phoneLogin=true" >短信登录</a>
                <a href="javascript:" :class="{on:!phoneLogin}" @click="phoneLogin=false">密码登录</a>
            </div>
        <form @submit.prevent="login">
            <div class="phoneLogin" v-show="phoneLogin">
                <div class="phone_captcha">
                    <input type="text" placeholder="请输入手机号" v-model="phone" v-focus="">
                    <button :disabled="!rightPhone"
                            :class="{right_phone:rightPhone}"
                            @click.prevent="getCode">{{computeTime>0? "剩余"+computeTime+"s":"获取验证码"}}</button>
                </div>
                <input type="text" placeholder="请输入验证码" v-model="code">
                <div class="tip">
                    温馨提示，未注册硅谷外卖的手机号码，登录时将自动注册硅谷外卖账号，且代表已经同意
                    <a href="javascript:" @click="goback">《用户协议》</a>
                </div>
            </div>
            <div class="pwdLogin" v-show="!phoneLogin">
                <input type="text" placeholder="手机/邮箱/用户名" v-model="name">
                <input type="text" placeholder="密码" v-if="showpwd" v-model="pwd">
                <input type="password" placeholder="密码" v-if="!showpwd" v-model="pwd">
                <div class="login_captcha">
                    <input type="text" placeholder="验证码" v-model="captcha">
                    <img ref="captcha" src="http://localhost:4000/captcha" alt="验证码o" @click="getCaptcha">
                </div>

                <div class="switch_button" @click="showpwd=!showpwd">
                    <div class="switch_long" :class="{showbg:showpwd}">
                        <div class="switch_circle" :class="{on:showpwd}"></div>
                    </div>
                    <div class="abc">{{showpwd?"abc":"***"}}</div>
                </div>
            </div>
            <button class="login_button">登录</button>
        </form>

            <div class="about_us">
                <span >关于我们</span>
            </div>
        <AlertTip v-if="showAlert" :alertText="alertText" @closeTip="closeTip"></AlertTip>

    </div>
</template>

<script>
    import AlertTip from '../../components/AlertTip/AlertTip.vue'
    import {reqPwdLogin,reqSendCode,reqSmsLogin,reqUserInfo,reqLogout} from '../../api/index.js'
    export default {
        name: "Login",
        data(){
            return{
                phoneLogin:true,
                showpwd:false,
                phone:'',//手机号码
                code:"",//短信验证码
                name:'',//用户名，邮箱号
                pwd:"",//密码
                captcha:'',//图形验证码
                //send:false,
                computeTime:0,
                alertText:"",
                showAlert:false
            }

        },
        components:{
            AlertTip
        },

        mounted(){
            let aa={};
            let bb='';
            Object.keys(aa).forEach(function(key){
                bb=key+'='+aa[key]+'&'
            });
            console.log(bb.length);
           let obj={};
           console.log(JSON.stringify(obj).length)
        },
        methods:{
            goback(){
                this.$router.back()
            },
            //获取手机号码验证码
           async getCode(){
                if(!this.computeTime){//如果有在计算时间，则不触发。避免重复
                    this.computeTime=30;
                    this.timer=setInterval(()=>{
                        this.computeTime--;
                        if(this.computeTime===0){
                            clearInterval(this.timer);

                            this.computeTime=0
                        }
                    },1000);
                    const phone=this.phone;
                   const result =await reqSendCode({phone});//获取验证码
                   if(result.code===1){//获取失败
                       this.showAlertTip(result.msg);
                       if(this.computeTime){
                           this.computeTime=0;
                           clearInterval(this.timer)
                       }

                   }else if(result.code===0){
                       this.showAlertTip("已经获取验证码，请查看您的手机短信")
                   }

                }
                //console.log(this)
            },
            showAlertTip(alertText){
                this.alertText=alertText;
                this.showAlert=true
            },
            closeTip(){
                this.showAlert=false
            },
            //登录,前台表单验证
           async login(){
                //假如手机号登陆
               let result ;
                if(this.phoneLogin){
                    if(!this.rightPhone){
                        //请输入正确手机号
                       // alert()
                        this.showAlertTip("手机号不正确");
                        return
                    }else if(!/^\d{6}$/.test(this.code)){
                        //请输入六位数字手机验证码
                        this.showAlertTip("手机验证码不正确");
                        return
                    }else{//假如手机号码验证登录方式，且验证码正确，请求登录
                       const phone=this.phone;
                       const code=this.code;
                        result=await reqSmsLogin({phone,code})//进行短信验证登录
                    }
                }else{//用户名登陆
                    if(this.name.length<2){
                        //用户名不正确
                        //alert("用户名不正确")
                        this.showAlertTip("用户名不正确");
                        return
                    }else if(this.pwd.length===0){
                        //
                        this.showAlertTip("密码不正确");
                        return
                    }else if(!this.captcha){
                        //

                        this.showAlertTip("图形验证码不正确");
                        return
                    }else{
                        const {name,pwd,captcha}=this;
                         result=await reqPwdLogin({name,pwd,captcha});//进行用户名密码登录

                    }

                }
                if(this.computeTime){
                    this.computeTime=0;
                    clearInterval(this.timer);
                    this.timer=undefined;
                }

               if(result.code===1){//登录失败
                   this.showAlertTip(result.msg);//弹出失败框
                    this.getCaptcha()//更新图层验证码

               }else if(result.code===0){//登录成功
                    //去用户界面
                   this.$router.replace('/profile');
                   //保存数据
                   const userInfo=result.data;
                  this.$store.dispatch('recordUser',userInfo);

               }


            },
            getCaptcha(){
                //不是ajax请求所以不是跨域
                this.$refs.captcha.src='http://localhost:4000/captcha?time='+Date.now()
              //  event.target.src='http://localhost:4000/captcha?time='+Date.now()
            }

        },
        computed:{
            rightPhone(){
                return  /^1\d{10}$/.test(this.phone)
            }
        }
    }
</script>

<style lang="stylus" scoped>
.fanhui
    display:fixed
    top:0
    left:0
    width: 100%
    height:0.8rem
    //background:red
    .iconfont
        line-height:0.8rem
        font-size:0.6rem
        width:1rem
        //color:

.title
    text-align:center
    font-size:1rem
    width: 100%
    height:2rem
    line-height:2rem
    color:green
    h2
        font-weight: bolder
.login_title
    padding:0 15%
    overflow:hidden
    a
        display:block
        width: 30%
        margin:0 10%
        height:0.8rem
        font-size:0.35rem
        line-height:1rem
        text-align:center
        color:#333
        float:left
        &.on
            color:#02a774
            font-weight :700
            border-bottom 2px solid #02a774
.phoneLogin
    width: 100%
    position:relative
    //background:red
    margin-top:10px
   // height:5rem
    input
        border:1px solid #8c93a1
        border-radius:5px
        width: 86%
        height:.8rem
        font-size:0.3rem
        margin-left:7%
        margin-bottom:0.35rem
        display:block
        box-sizing:border-box
    .phone_captcha
        position:relative
        button
            position:absolute
            min-width:24%
            height:0.78rem
            line-height:0.78rem
            right: 7%
            font-size: 0.3rem
            color:#ccc
            top:0
            &.right_phone
                color:#000
    .tip
        font-size:0.24rem
        width: 86%
        margin:0  7%
        color:#333
        padding-top:0.2rem
        padding-bottom:0.6rem
        a
            color:green

.pwdLogin
    width: 100%
    position:relative
    //background:red
    margin-top:10px
    // height:5rem
    input
        border:1px solid #8c93a1
        border-radius:5px
        width: 86%
        height:.8rem
        font-size:0.3rem
        margin-left:7%
        margin-bottom:0.35rem
        display:block
        box-sizing:border-box
    .switch_button
        position:absolute
        width:14%
        height:0.8rem
        top:1.15rem
        right: 7%
        //background:red
        .showbg
            background:lawngreen
        .switch_long
            height:0.3rem
            width:60%
            margin-left: 20%
            margin-top:15%
            border:1px solid #4b7cff
            border-radius:0.15rem
            .switch_circle
                height: 0.3rem
                width:0.3rem
                border-radius:0.15rem
                background:#4b7cff
            .on
                float:right

        .abc
            text-align:center
            height:0.3rem
            font-size: 0.3rem
            line-height:0.3rem


    .login_captcha
        position:relative
        img
            position:absolute
            top:0
            right:7%
            min-width:20%
            padding-right:0.2rem
            height:.8rem
            line-height:0.8rem
            display:block
            font-size:0.4rem
            //background:red


.login_button
    width: 86%
    height:0.8rem
    margin:0 7%
    border-radius:5px
    background:lightgreen
    display:block
    font-size:0.6rem
    line-height:0.8rem
.about_us
    text-align:center
    font-size:0.25rem
    color:#8c93a1
    margin-top:0.6rem
</style>
